<template>
    <div class="box">
        <Box1 title="作品集" tag = "PORTFOLIO"/>
        <div class="box-2">
            <a-tabs v-model:activeKey="activeKey" centered>
                <a-tab-pane key="1" tab="全部" force-render type="card">
                    <a-list :pagination="pagination" :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 4 }"
                        :split="false" :data-source="data">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <a-card hoverable class="card">
                                    <a-card-meta :title="item.title" description="This is the description"
                                        class="card-meta" />
                                </a-card>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-tab-pane>
                <!-- <a-tab-pane key="2" tab="开源">Content of Tab Pane 2</a-tab-pane> -->
            </a-tabs>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Box1 from '../../components/provider/box1.vue'

const activeKey = ref('1');
const data = [
    {
        title: 'Title 1',
    },
    {
        title: 'Title 2',
    },
    {
        title: 'Title 3',
    },
    {
        title: 'Title 4',
    },
    {
        title: 'Title 5',
    },
    {
        title: 'Title 6',
    },
    {
        title: 'Title 7',
    },
    {
        title: 'Title 8',
    },
];
const pagination = {
    onChange: (page) => {
        console.log(page);
    },
    pageSize: 8,
};
</script>
<style scoped lang="scss">
.box {
    text-align: center;
    background-color: #f9f8f7;

    .box-2 {
        margin-top: -10px;

        .card {
            padding-top: 10px;
            background-color: #f9f8f7;
            height: 320px;
            background-image: url("https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;

            .card-meta {
                margin-top: 200px;
                overflow: hidden;
                filter: invert(100%);
                font-size: 26px;
            }
        }
    }
}


:deep(.ant-tabs-tab-btn) {
    font-size: 20px;
}

:deep(.ant-tabs-nav::before) {
    border-bottom: none;
}

:deep(.ant-list-pagination) {
    text-align: center;
}
</style>